#番外-讓你的CSS好讀起來！CSS命名方法論筆記

2021 iThome 鐵人賽

DAY 10

Modern Web

這個網站也太嗨！30 個網頁動態提案系列第 11 篇

13th鐵人賽 css scss

Global Rachel

團隊寫 code 需要講幹話

2021-09-25 13:55:17

8340 瀏覽

分享至

你有以下困擾嗎？

常常不知道要怎麼命名Class嗎？（還一直去 Google 英文字的是你ㄇ？）
還是常常寫了一個Class樣式後就被另一個Class樣式給覆蓋？（我來自首！）
命名了.button-green後，設計師又說不要綠色了，全部改藍色！害你一個一個改命名嗎？（又是我！）

那你更應該跟我一起學一下CSS命名方法論！

昨天算是純CSS的動態正式結束了
（雖然後面兩篇還是有小用JS）
今天額外想要探討一下CSS的命名規則，
雖然寫到這裡時我的鐵人賽文章幾乎都快寫完了，
然後Demo code也是 XD

但也是警惕一下自己，之後希望都可以照著命名規則去前進。

CSS命名的不要！

壞的命名不要！
（同場放歌：嫑Biao）

CSS命名時，其實就是要避免開頭寫到的第三種情況

讓元素的命名不要依賴於位置或是樣式，
命名了.button-green後，設計師又說不要綠色了，全部改藍色！害你一個一個改命名嗎？
這邊參考卡斯柏老師的文章)，

1.元素避免直接用相對關係命名
避免： .container-item ，也可以用OOCSS的風格拆開：.container .item

2.色彩等樣式避免直接用顏色命名，改以風格命名
避免. .button-green ，改以 .button-active等狀態命名
狀態一定是比樣式更高的一個層級，當要改顏色時，命名就不用動囉！

3.Layout避免用位置命名
避免.left-menu等，可以用OOCSS的風格將位置拆開：
.menu .left 之後還可以重複利用呢！

而該如何更好的命名呢？下面就開始進入正題囉！

常見的3種命名風格

常見的命名風格有BEM、OOCSS和SMACSS
從如何去命名（抽象地去重組概念）到命名的風格，
讓CSS選擇去不會有衝突、可以重複利用，甚至更好地維護。
其實三種個核心就是把東西給拆解，
分為佈局、元素和樣式等等，讓彼此關係不要互相依賴，
可以獨立存在。
先快速看一下吧！

風格	BEM	OOCSS	SMACSS
優點	結構清晰語意化，減少覆蓋class	減少對HTML的依賴，重複利用Class	語意化CSS，減少對HTML依賴
缺點	class命名太長	結構分類有模糊地帶	同左

風格1: BEM 名稱最短最好記

(Block Element Modifier)
最近在國外的前端求職網站比較常看見的BME，也常在codepen上看到，
看命名就知道是以區塊為主（廢話）

是以「區塊__元素 — 樣式（修飾符）」的命名風格，

由區塊、元素與修飾狀態

Block是頁面獨立的區塊，每個頁面都可以看成很多區塊的組合。
Element是指區塊中的元素
Modifier 是指描述Block或者Element的屬性或狀態

例如我們有一個header區塊，裡面有button元素，和樣式修飾active和disable

命名就會是：

.header

.header_button—-active

.header_button—-disable

可以搭配SCSS傳送門更有效率地寫程式碼！

.header{
	
	&_button{
	border: 1px solid black;

		&—-disable{
			background: black;
			}

	}

}

風格2: OOCSS：物件導向的CSS

OOCSS(Object-oriented programming)命名就是以物件導向為中心思想，
BootStrap就是很典型的 OOCSS～可以自由組合出想要的網頁模樣，
且避免多寫很多行同樣的 CSS 樣式。

OOCSS比起「BME明確的命名指導」，比較是「CSS風格指引」
BootStrap就有一點BEM + OOCSS的味道在（如果有錯還請指教！）

OOCSS原則：

容器與內容分離(container vs. content)

結構與樣式分離（structure vs. skin）

原則1: header 就是容器，logo、menu、button 就是內容。
讓內容離開容器也可以正確顯示。

原則2:讓結構和樣式分離，不會互相依賴。就是把樣式跟結構拆離，
譬如說我有一個button，但在各種使用情境下風格不同(.active / .disable)
所以會把skin拆出來

.button {
  width: 200px;
  height: 50px;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

這樣的結構與樣式抽離，可以讓開發者透過組合更好來重複利用、維護與管理，
如果需要改部分樣式時，只要把部分的零件拿掉，不會牽一髮動全身！

風格3: SMACSS 伸縮自如的CSS架構！

Scalable and Modular Architecture for CSS —>可伸縮模塊化的CSS架構

主要分成5大類：

1.基礎(Base) default style, 不需要前綴
2.佈局(Layout)，將頁面切割的部分前綴為 l- 或 layout-，如l-table、layout-grid
3.模塊(Module)-可重複利用的對象，前綴為 m-或本身名稱，如m-nav
4.狀態(State)-如隱藏、active等等，前綴為 is-，如is-active
5.主題(theme)-如明亮、暗模式，前綴為 theme-，如theme-dark